<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    Vue模板语法的2大分类
        1.插值语法  用于解析标签体内容 写法:   {{}}里面写js表达式 自动获取data中的属性
        2.指令语法 用于解析标签属性,标签体内容,绑定事件....
            v-bind:href="xxx"  简写成:href="xxx"
-->
<div id="root">
    <h2>插值语法</h2>
    <h4>你好,{{name}}</h4>
    <hr>
    <h2>指令语法</h2>
    <a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data:{
            name:"李焕英",
            url:"https://www.baidu.com"
        }
    })
</script>
</body>
</html>